<template>
  <div>{{ testStore.name }}. {{ testStore.code }}</div>
  <button @click="patch">批量修改</button>
  <hr>
  <button @click="change">解构</button>
  <hr>
  <div>{{ testStore.user }}</div>
  <button @click="action1">action</button>
  <button @click="action2">action异步</button>
  <hr>
  <div>{{ testStore.newName }}</div>
  <button @click="testStore.name = '孙小双'">改变</button>
  <hr>
  <input type="text" v-model="testStore.name">
</template>

<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { ref, reactive } from 'vue'
import { useTestStore } from '../store'


const testStore = useTestStore()
// 修改
// 1
// testStore.name = '孙远杰'
// 2
const patch = () => {
  testStore.$patch({
    name: '华天晓',
    code: 'huatianxiao'
  })
}


// 解构赋值
const { name, code } = storeToRefs(testStore)
const change = () => {
  name.value = '李怡然'
}

// action
const action1 = () => {
  testStore.setUser()
}
const action2 = async () => {
  await testStore.setUserAsync()
}


</script>

<style lang='scss' scoped>

</style>